import React, { useCallback, useEffect } from 'react';
import { Head } from 'ice';
import { Button, Card, Dialog, Field, Icon, Input, Pagination, ResponsiveGrid, Table, Tag } from '@alifd/next';
import { useFusionTable, useSetState } from 'ahooks';
import PageHeader from '@/components/PageHeader';
// import store from '@/store';
import store from './store';
import ActionBar from './ActionBar';
import Other from './Other';
import styles from './index.module.scss';

const TableActionIcon = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1899388_oxn3zhg34oj.js',
});

const TableList = (props) => {
  const { title, breadcrumbs, model, modelId, list, tableColumns, children } = props;
  // const modelDispatchers = store.useModelDispatchers(model);
  const [actionState, actionDispatchers] = store.useModel('action');
  const field = Field.useField([]);

  const { tableProps, paginationProps, search } = useFusionTable(list, {
    defaultPageSize: 15,
    field,
    cacheKey: 'tableProps',
    formatResult: (response) => {
      return {
        list: response.page.list,
        total: response.page.totalCount,
      };
    },
  });

  const { reset } = search;

  let actionBar;
  React.Children.map(children, (child) => {
    if (child.type === ActionBar) {
      actionBar = React.cloneElement(child);
    }
  });

  return (
    <ResponsiveGrid gap={20}>
      <Head>
        <title>{title}</title>
      </Head>
      <ResponsiveGrid.Cell colSpan={12}>
        <PageHeader breadcrumbs={breadcrumbs} />
      </ResponsiveGrid.Cell>
      <ResponsiveGrid.Cell colSpan={12}>
        <Card free className={styles.container} id="table-container">
          <Card.Content>
            <div className={styles.actionBar}>
              <div className={styles.search}>{actionBar}</div>
              <div className={styles.rightButtonGroup}>
                <Button
                  text
                  onClick={() =>
                    actionDispatchers.setState({ size: actionState.size === 'medium' ? 'small' : 'medium' })
                  }
                >
                  <TableActionIcon type="narrow" size="small" />
                </Button>
                <Button text onClick={() => actionDispatchers.setState({ isZebra: !actionState.isZebra })}>
                  <TableActionIcon type="zebra" size="small" />
                </Button>
              </div>
            </div>
            <Table
              {...tableProps}
              primaryKey={modelId}
              rowSelection={{
                onChange: (selectedRowKeys) => {
                  if (selectedRowKeys.length > 0) {
                    actionDispatchers.setState({ multipleDelBtnDis: false, selected: selectedRowKeys });
                  } else {
                    actionDispatchers.setState({ multipleDelBtnDis: true, selected: [] });
                  }
                },
              }}
              size={actionState.size}
              isZebra={actionState.isZebra}
            >
              {tableColumns.map((item, index) => (
                <Table.Column key={index} {...item} />
              ))}
            </Table>
          </Card.Content>
        </Card>
      </ResponsiveGrid.Cell>
    </ResponsiveGrid>
  );
};
TableList.ActionBar = ActionBar;
TableList.Other = Other;

export default TableList;
